<template>
	<view class="record-detail page-content">
		<nav-bar back >喂养统计</nav-bar>
		<!-- <uni-list > -->
			<uni-list-item showArrow title="今日统计" clickable @click="goDetail('now')"/>
			<uni-list-item showArrow title="近24小时统计" clickable  @click="goDetail('24')"/>
			<uni-list-item showArrow title="近48小时统计" clickable  @click="goDetail('48')"/>
			<uni-list-item title="图表统计" style="background: #eee;"/>
			<uni-list-item v-for="item in typeList" showArrow :title="item.name" clickable @click="goChart(item)" />
		<!-- </uni-list> -->
		
		
	</view>
</template>

<script setup>
	import { reactive, ref,shallowRef } from 'vue';
	import { onLoad,onReachBottom } from '@dcloudio/uni-app';
	import {recordList} from '@/utils/config.js'
	
	const typeList = recordList.filter(item=>Array.isArray(item.tabs))
	
	const goDetail=(name,a)=>{
		console.log('详情',name,a);
		uni.navigateTo({
			url: `/pages/tabbar/tabbar-1/tabbarPage/statisticsDetail?type=${name}`
		});
	}
	
	const goChart=({key},a)=>{
		console.log('详情',a);
		uni.navigateTo({
			url: `/pages/tabbar/tabbar-1/tabbarPage/statisticsCharts?type=${key}`
		});
	}
	
	
	
	
</script>

<style lang="scss">
.record-detail{
	.record-detail-main{
		padding: 20rpx;
	}
	
	.home-list-item{
		border: 1px solid rgba(0, 0, 0, .1);
		border-radius: 10rpx;
		padding: 20rpx;
		margin-bottom: 20rpx;
		display: flex;
		justify-content: space-between;
		.name{
			font-size: 32rpx;
		}
		.value{
			font-size: 28rpx;
			margin-top: 15rpx ;
		}
		.remark{
			margin-top:  15rpx;
			font-size: 28rpx;
			color: #ccc;
		}
		.home-list-item-right{
			font-size: 28rpx;
			color: #333;
		}
	}
}
</style>
